<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            margin: 50px auto;
            width: 500px;
        }

        .box>input {
            height: 30px;
            /* 首行缩进 */
            text-indent: 15px;
            border: 1px solid #8bc58b;
            /* 外边框 轮廓 */
            outline: none;
        }

        .box>span {
            /* 默认不显示 */
            display: none;
            /* 垂直方向对齐方式 */
            vertical-align: middle;
            width: 200px;
            line-height: 30px;
            text-indent: 14px;

        }

        .box>span.wrong {
            display: inline-block;
            border: 1px solid#f9b098;
            color: #ff2f66;
            background: #ffdcd0 url(./wrong.png) no-repeat left;

        }

        .box>span.right {
            display: inline-block;
            border: 1px solid#c9ddc9;
            color: #189189;
            background: #dfffdf url(./right.png) no-repeat left;

        }
    </style>
</head>

<body>
    <div class="box">
        <label for="name">高数：</label>
        <input type="text" id="name">
        <span></span>
    </div>
</body>
<script>
    var inputs = document.querySelector('input');
    var spa = document.querySelector('span')
    inputs.onblur = function () {
        var val = inputs.value;
        if (val == '') {
            spa.innerText = '分数不能为空';
            spa.className = 'wrong';
            return
        }

        if (isNaN(val)) {
            spa.innerText = '请输入数字';
            spa.className = 'wrong';
            return
        }

        if (Number(val) > 150 || Number(val) < 0) {
            spa.innerText = '请输入数字0-150';
            spa.className = 'wrong';
            return
        }

        spa.innerText = '您输入的格式正确';
        spa.className = 'right';
    }
</script>

</html>